<template>
	<view class="resume-container">
		<view class="resume-form">
			<view class="resume-form-item">
				<text class="label">公司名称</text>
				<input class="input-text" v-model="form.companyName" type="text" placeholder="请填写公司名称">
			</view>
			<view class="resume-form-item">
				<text class="label">岗位名称</text>
				<input class="input-text" v-model="form.stationName" type="text" placeholder="请填写岗位名称">
			</view>
			<view class="resume-form-item">
				<text class="label">入职时间</text>
				<picker mode="date" :value="entryDateIndex" fields="month" :start="startDate" :end="endDate" @change="handleChangeentryDate">
					<input class="input-text select" v-model="form.entryTime" disabled type="text" placeholder="请选择你的入职时间">
				</picker>
			</view>
			<view class="resume-form-item">
				<text class="label">离职时间</text>
				<picker mode="date" :value="dimissionDateIndex" fields="month" :start="startDate" :end="endDate" @change="handleChangeDimissionDate">
					<input class="input-text select" v-model="form.resignTime" disabled type="text" placeholder="请选择你的离职时间">
				</picker>
			</view>
			<view class="resume-form-item introduct">
				<text class="label">工作描述</text>
				<editor id="editor" class="textarea-text" style="height: 320px;" placeholder="请填写工作描述..." @input="handleChangeText" @ready="onEditorReady"></editor>
				 <!-- <textarea class="textarea-text" v-model="form.introduct" :maxlength="maxLength" placeholder="请填写工作描述" /> -->
				<text class="count">{{ fontNumber }}/ {{ maxLength }}</text>
			</view>
		</view>
		<view class="add-form-btn">
			<button class="delete-btn" @tap="handleDelete" >删除</button>
			<button class="submit-btn" @tap="handleSubmit" >保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					companyName: '',
					stationName: '',
					entryTime: '',
					resignTime: '',
					jobDesc: ''
				},
				resumeForm: {},
				entryDateIndex: -1,
				dimissionDateIndex: -1,
				maxLength: 1000,
				fontNumber: 0,
				experienceIndex: '',
				tempData: {}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			// fontNumber() {}
			
		},
		onLoad(option) {
			console.log(option, 'option999999')
			if (option.formData) {
				const form = decodeURIComponent(option.formData)
				this.resumeForm = JSON.parse(form)
				this.tempData = JSON.parse(form)
				console.log(this.resumeForm, 9988)
			}
			if (option.index !== '') {
				// const experienceForm = decodeURIComponent(option.experienceData)
				// console.log(JSON.parse(experienceForm), 'experienceForm')
				this.experienceIndex = option.index
				console.log(option.index, 'resume--')
				this.form = this.resumeForm.userResumeDetailList[option.index]
			}
		},
		methods: {
			handleChangeentryDate(e) {
				this.form.entryTime = e.detail.value
			},
			handleChangeDimissionDate(e) {
				this.form.resignTime = e.detail.value
			},
			handleChangeText(e) {
				this.form.jobDesc = e.detail.html
				this.fontNumber = e.detail.text.length
			},
			onEditorReady() {
				const _this = this
				uni.createSelectorQuery().select('#editor').context((res) => {
					res.context.setContents({
						html: this.form.jobDesc
					})
				}).exec()
			},
			handleDelete() {
				// const _this = this
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定删除该工作经历吗?',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			_this.resumeForm.userResumeDetailList.splice(0, this.experienceIndex)
				// 			uni.showToast({
				// 				title: '删除成功'
				// 			})
				// 			setTimeout(()=> {
				// 				_this.getBack()
				// 			}, 300)
				// 		}
				// 	},
				// });
				if (this.resumeForm.userResumeDetailList?.length) {
					this.resumeForm.userResumeDetailList.splice(this.experienceIndex, 1)
					this.getBack()
				}
				
				
			},
			handleSubmit() {
				console.log(this.tempData, '8888')
				if (this.experienceIndex) {
					this.$set(this.resumeForm.userResumeDetailList, this.experienceIndex, this.form)
				} else {
					this.resumeForm.userResumeDetailList.push(this.form)
				}
				this.getBack()
			},
			getBack() {
				const tempParams = this.resumeForm
				tempParams.attachment = this.tempData.attachment
				tempParams.fileName = this.tempData.fileName
				let formData = JSON.stringify(tempParams)
				
				console.log(formData, 123123)
				uni.reLaunch({
					url: `/subpage/talentemployment/employment/addresume?formData=${encodeURIComponent(formData)}`
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resume-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 24rpx 32rpx;
		background: #F2F5FF;
		box-sizing: border-box;
	}
	.resume-form {
		width: 100%;
		padding: 18rpx 46rpx 36rpx;
		background: #FFFFFF;
		border-radius: 20px;
		box-sizing: border-box;
		.resume-form-item {
			display: flex;
			justify-content: space-between;
			padding: 32rpx 0;
			border-bottom: 2rpx solid rgba(52, 49, 79, 0.08);
			&.introduct {
				display: block;
				position: relative;
			}
			.label {
				display: block;
				font-weight: 400;
				font-size: 28rpx;
				color: #34314F;
				line-height: 20px;
			}
			.label-tip {
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(52, 49, 79, 0.7);
				line-height: 18px;
				text-align: left;
			}
			.input-text {
				position: relative;
				text-align: right;
				font-size: 26rpx;
				&.select {
					padding-right: 40rpx;
				}
				&.select::after {
					position: absolute;
					top: 50%;
					right: 0;
					display: block;
					width: 32rpx;
					height: 32rpx;
					transform: translateY(-50%);
					background: url('@/static/images/index/right-arrow.png') no-repeat center;
					background-size: 100% 100%;
					content: '';
				}
			}
			.textarea-text {
				width: 100%;
				height: 440rpx;
				padding: 24rpx 0;
				box-sizing: border-box;
				font-size: 26rpx;
			}
			.count {
				position: absolute;
				bottom: 16rpx;
				right: 20rpx;
				font-size: 24rpx;
				color: rgba(52, 49, 79, 0.4);
			}
			.add-btn {
				width: 40rpx;
				height: 40rpx;
				background: url('@/static/images/more.png') no-repeat center;
				background-size: 100% 100%;
			}
		}
		
	}
	.add-form-btn {
		// position: absolute;
		// bottom: 40rpx;
		// left: 32rpx;
		display: flex;
		margin: 44rpx 0;
		button {
			font-weight: 600;
			font-size: 32rpx;
			color: #34314F;
			line-height: 96rpx;
			text-align: center;
			border-radius: 20px;
			&::after {
				border: 0;
			}
		}
		.delete-btn {
			width: 268rpx;
			height: 96rpx;
			background-color: rgba(52, 49, 79, 0.06);
		}
		.submit-btn {
			width: 408rpx;
			height: 96rpx;
			margin-left: 28rpx;
			background: #FFDE6D;
		}
	}
</style>